<template>
  <div class="DeliveryForm-wrap">
    <el-card class="box-card">
      <div slot="header" class="DeliveryForm-header clearfix flex">
        <div class="DeliveryForm-header-title flex">货单列表</div>
        <div class="DeliveryForm-header-inp flex">
          <!-- 搜索框 -->
          <div class="inp-search inp flex">
            <div class="inp-search-label">搜索商品名称：</div>
            <div class="inp-search-input">
              <el-input
                type="text"
                v-model="keyword"
                clearable
                placeholder="请输入商品名称"
              />
            </div>
          </div>
          <!-- 下拉框 -->
          <div class="inp-select inp flex">
            <div class="inp-select-label">货单状态：</div>
            <div class="inp-select-input">
              <el-select v-model="stateVal" placeholder="请选择">
                <el-option
                  v-for="item in stateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <div>
        <Table  @reSend="reSend" :tableData="ordersList"></Table>
      </div>
      <div class="page-wrap">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="current"
          :total="+total"
          :page-size="size"
          @current-change="changeCurPage"
        >
        </el-pagination>
      </div>
    </el-card>
    <Delivery @reSend="reSend"></Delivery>
    <Detail @reSend="reSend"></Detail>
  </div>
</template>

<script>
import Table from "./Table";
import Delivery from "./Delivery";
import Detail from "./Detail";
import {
  getDeliveryFormListApi,
  getToInvoiceListApi,
  getForReceiptListApi,
  getForEvaluationListApi,
} from "@/http/api.js";
export default {
  components: {
    Table,
    Delivery,
    Detail,
  },
  data() {
    return {
      keyword: "",
      size: 10,
      current: 1,
      total: 0,
      ordersList: [],
      stateOptions: [
        { label: "全部", value: 0 },
        { label: "待发", value: 1 },
        { label: "待收", value: 2 },
        { label: "待评", value: 3 },
      ],
      stateVal: 0,
    };
  },
  methods: {
    async getDeliveryFormList() {
      if (this.stateVal == 0) {
        let res = await getDeliveryFormListApi({
          keyword: this.keyword,
          size: this.size,
          current: this.current,
        });
        this.ordersList = res.data.records;
        this.total = res.data.total;
      } else if (this.stateVal == 1) {
        // 获取待发货单
        let res = await getToInvoiceListApi({
          keyword: this.keyword,
          size: this.size,
          current: this.current,
        });
        this.ordersList = res.data.records;
        this.total = res.data.total;
        // 获取待收货单
      } else if (this.stateVal == 2) {
        let res = await getForReceiptListApi({
          keyword: this.keyword,
          size: this.size,
          current: this.current,
        });
        this.ordersList = res.data.records;
        this.total = res.data.total;
        // 获取待评价单
      } else if (this.stateVal == 3) {
        let res = await getForEvaluationListApi({
          keyword: this.keyword,
          size: this.size,
          current: this.current,
        });
        this.ordersList = res.data.records;
        this.total = res.data.total;
      }
    },
    // 改变当前页
    changeCurPage(val) {
      this.current = +val;
      this.getDeliveryFormList();
    },
    reSend(){
      this.getDeliveryFormList()
    }
  },
  created() {
    this.getDeliveryFormList();
  },
  watch: {
    stateVal: {
      handler(val, oldVal) {
        console.log(val);
        this.getDeliveryFormList();
      },
    },
    keyword:{
      handler(val, oldVal) {
        this.getDeliveryFormList();
      },  
    }
  },
};
</script>
 
<style lang="less" scoped>
.DeliveryForm-wrap {
  .box-card {
    .DeliveryForm-header {
      justify-content: space-between;
      .DeliveryForm-header-title {
        align-items: center;
      }
      .DeliveryForm-header-inp {
        font-size: 14px;
        .inp {
          margin-right: 10px;
        }
        .inp-search {
          align-items: center;
        }
        .inp-select {
          user-select: none;
          align-items: center;
        }
      }
    }
  }
  .page-wrap {
    padding: 20px 0;
  }
}
</style>